<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        日志管理
        <small>系统日志的管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">系统管理</a></li>
        <li class="active">日志管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="searchUsername">用户名</label>
                                <input type="text" class="form-control input-sm" name="username" id="searchUsername" placeholder="请输入用户名">
                                <label for="searchIp">IP</label>
                                <input type="text" class="form-control input-sm" name="ip" id="searchIp" placeholder="请输入IP">
                                <label for="searchReqMethod">请求方法</label>
                                <input type="text" class="form-control input-sm" name="reqMethod" id="searchReqMethod" placeholder="请输入请求方法">
                                <label for="searchExecMethod">执行方法</label>
                                <input type="text" class="form-control input-sm" name="execMethod" id="searchExecMethod" placeholder="请输入执行方法">
                                <label for="searchStatus">状态</label>
                                <input type="text" class="form-control input-sm" name="status" id="searchStatus" placeholder="请输入执行方法">
                                <!-- Date range -->
                                <label for="reservation">时间</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control input-sm" id="reservation">
                                    <input type="hidden" name="startDate" id="startDate">
                                    <input type="hidden" name="endDate" id="endDate">
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-sm" onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="btn btn-default btn-sm" id="reset" onclick="javascript:document.querySelectorAll('#startDate, #endDate').forEach(d=> d.value='')">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    清空
                                </button>
                            </div>
                        </form>
                    </div>
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
<script>

    var $table = $('#table');

    $(function () {
        //Date range picker
        var beginTimeTake;
        $('#reservation').daterangepicker({
            "timePicker": false,
            "timePicker24Hour": true,
            "linkedCalendars": false,
            "autoUpdateInput": false,
            "locale": {
                format: 'YYYY-MM-DD',
                separator: ' ~ ',
                applyLabel: "应用",
                cancelLabel: "取消",
                resetLabel: "重置",
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            }
        }, function(start, end, label) {
            if(!this.startDate){
                this.element.val('');
            }else{
                $('#startDate').val(this.startDate.format(this.locale.format));
                $('#endDate').val(this.endDate.format(this.locale.format));
                this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
            }
        });
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/log/list',
            idField: 'id',
            searchOnEnterKey: false,
            columns: [
                {field: 'state', checkbox: true},
                {field: 'id', title: '编号', sortable: true, halign: 'left'},
                {field: 'username', title: '用户', sortable: true, halign: 'left'},
                {field: 'ip', title: 'IP', sortable: true, halign: 'left'},
                {field: 'execDesc', title: '操作描述', sortable: true, halign: 'left'},
                {field: 'status', title: '状态', sortable: true, halign: 'left'},
                {field: 'createTime', title: '时间', formatter: 'timeFormatter', sortable: true, halign: 'left'},
                {field: 'execMethod', title: '执行方法', sortable: true, halign: 'left'},
                {field: 'execTime', title: '耗时', formatter: 'execTimeFormatter', sortable: true, halign: 'left'},
                {field: 'reqMethod', title: '请求方法', sortable: true, halign: 'left'},
                {field: 'reqUri', title: '请求URL', sortable: true, halign: 'left'},
                {field: 'args', title: '参数', sortable: true, halign: 'left'},
                {field: 'returnVal', title: '返回值', sortable: true, halign: 'left'}
            ]
        });
    });

    function timeFormatter(value, row, index) {
        return Utils.dateFormat.formatTimestamp(value, 'yyyy-MM-dd hh:mm:ss');
    }

    function execTimeFormatter(value, row, index) {
        return value + ' ms';
    }

    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }
</script>
</html>